/**
*
*  侧边栏js 文件
*
*/

var $ = function(key){
    return document.querySelectorAll(key);
}

// 笨重的方法
/*$(".c_click-but")[0].onclick=function(){
    var tof =$(".c_click-but")[0].attributes["dtype"].nodeValue;
    if(tof==1){
        $(".c_click-but")[0].setAttribute("dtype","2")
         $("#control")[0].className = "cons";
         $("#canvas")[0].className = "cons";
    }else{
        $(".c_click-but")[0].setAttribute("dtype","1");
        $("#control")[0].className = "";
        $("#canvas")[0].className = "";
    }
}*/

// 简便的方法 使用的是classlist 
$(".c_click-but")[0].addEventListener('click', function(e){
    $("#canvas")[0].classList.toggle("cons");
    $("#control")[0].classList.toggle("cons");
}, false)

var ball = document.getElementById("ball");
var rect = document.getElementById("rect");

function chose(particleName){
    particleName.addEventListener('click', function(e){
        this.style.backgroundColor = "orange";
        (particleName == ball ? rect : ball).style.backgroundColor = "rgba(0, 0, 0, 0)";
        type = (type === "ball" ? "rect" : "ball");
        change();
        
    }, false)
}

chose(ball);
chose(rect);